昨天看完了套件的blade，敲開了前端的大門，今天可以開始實作可以動的網站了，先為走到12天的你和我們拍拍手，接著要進入今天的鐵人賽了，我們要在網站上增加活動總覽和新增文章的畫面，跟著網頁前進的方向，出發。

我們先進入routes\web.php，

Route::get('/', [\App\Http\Controllers\ArticleController::class, "index"] 
)->name('dashboard');

Route::resource('articles',\App\Http\Controllers\ArticleController::class);

/*Route::get('/', function () {
    return view('dashboard');
});*/

/*Route::get('/dashboard', function () {
    return view('dashboard');
})->name('dashboard');
->middleware(['auth', 'verified'])->name('dashboard');*/

請所有進入網站的使用者從dashboard移駕到articles的index，並把這條路徑改名，這樣就可以順利交接兩個blade的工作了。

接著進入我們的app\Http\Controllers\ArticleController.php，

public function index()
    {
        $articles = Article::with('user')->orderBy('start_time', 'desc')->paginate(10);
        return view('articles.index', ['articles' => $articles]);
    }

先是with，這是一種eager loading，我們期望活動總覽上能有舉辦方的大名，請資料庫先備著資料，不遠的未來會用到的，然後資料按照開放報名的時間排序，paginate意味著一頁十筆資料，多的會有可愛的換頁符號出現，但我們暫時也還看不到他。

這時回到我們的網頁，

報錯問articles.index在哪裡，在resources\views的articles資料夾裡，一個叫index.blade.php的檔案，不存在是因為他在等我們建立，現在就動動手建起他吧。

建完了，我們要繼續前進了，到我們親手建的resources\views\articles\index.blade.php，

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 py-6">
        <button type = "submit" class="px-3 py-1 rounded bg-gray-800 text-white hover:bg-gray-700">
            <a href = "{{route('articles.create')}}"> 新增活動</a>
        </button>
    </div>
</x-app-layout>

先閉上眼睛，可以再逃避一下凌亂的css，等我們都再成熟一點，就可以接觸css了，總之我們現在要route去create，也就是新增文章的頁面了。

如果你很興奮地按了button，回憶一下，我們為什麼會是一片白，(留給思考的時間)，我們要先進controller，告訴他create是要做什麼的，app\Http\Controllers\ArticleController.php，

public function create()
    {
        return view('articles.create');
    }

接下來就新增create.blade.php進articles，然後進到resources\views\articles\create.blade.php，

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('新增文章') }}
        </h2>
    </x-slot>
	
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 m-6 text-center">
                     @if($errors->any())
						<div class = "error p-3 bg-red-150 text-white font-thin rounded">
							<ul>
								@foreach($errors -> all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>

					@endif

					<form action = "{{ route('articles.store') }}" method = "post">  
						@csrf
						<div class="field my-2 ">
							<lable for="" class="mb-2"> {{__("標題")}}</lable>
							<input type = "text" value="{{ old('title') }}" name = "title" class = "w-2/5 border-gray-300 p-2 mx-2">

						</div>

						<div class="flex-auto ">
							<div class="field my-2" ><p>{{__("內文")}}</p></div>
							<div class="field my-2" >
								<lable for="" class="mb-2"> {{__("")}} </lable>
								<textarea name = "content" rows = "20" class = "w-4/5 m-auto border-gray-300 p-2 " >{{ old('content') }}</textarea>

							</div>

						</div>
						
						<div class="flex-auto ">
							<div class="field my-2" ><p>{{__("簡介")}}</p></div>
							<div class="field my-2 " >
								<lable for="" class="mb-2"> {{__("")}} </lable>
								<textarea name = "summary" rows = "5" class = "w-4/5 m-auto border-gray-300 p-2" >{{ old('summary') }}</textarea>

							</div>
						</div>

						<div class="field my-2 ">
							<lable for=""> {{__("開始時間")}} </lable>
							<input type = "date" value="{{ old('start_time') }}" name = "start_time" class = "border-gray-300 p-2 mx-2">

						</div>

						<div class="field my-2 ">
							<lable for=""> {{__("結束時間")}} </lable>
							<input type = "date" value="{{ old('end_time') }}" name = "end_time" class = "border-gray-300 p-2 mx-2">

						</div>

						<div class="flex mt-4 space-x-6 justify-center">
							<div class="actions">
								<button type = "submit" class="px-3 py-1 rounded bg-gray-800 text-white hover:bg-gray-700"> {{__("新增活動")}} </button>

							</div>
							<div class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 ">	
								<a href = "{{route('dashboard')}}" > {{__("取消新增")}} </a>
							</div>
						</div>
					</form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

這樣新增的表單就放置在這了，明天一樣會跟著網頁前進的順序走，從create到store，真正把資料儲存起來，也就是創建活動，期待明天吧，今天就先到這了掰掰。